<template>
  <div class="choose_wrap">
    <div class="ocr_wrap">
      <!-- <img src="../assets/ocr.png" alt="" width="590px" height="200px"> -->
    </div>
    <el-button type="text" icon="el-icon-arrow-left" class="exit" size="mini" @click="gotoBack">返回</el-button>
    <div class="title_wrap">
      任务单自动识别系统
    </div>
    <div class="box">
      <div class="title">
        请导入电子版电系操作指令票：
      </div>
      <form class="inputFile" enctype="multipart/form-data">
        <input type="file" id="files" @change="getFile($event)" ref="uploadFile">
        点击选择文件
      </form>
      <div class="fileName" v-if="fileName !== ''">
        已选择：{{ fileName }}  文件
      </div>
      <div class="fileName" v-if="fileName == ''">
        此处显示已选择的文件名
      </div>
      <div v-loading="shows" class="btn" @click="sendFile">
        点击上传文件
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fileList: [],
      fileName: '',
      //isShow: true,
      result: {},
      shows:false 
    }
  },
  methods: {
    getFile(event) {
      let fileList = event.target.files
      this.fileList = Array.prototype.slice.call(fileList)
      // this.fileList = event.target.files
      this.fileName = this.fileList.length
      console.log(this.fileList[0].name)
      this.fileName = this.fileList[0].name
    },
    sendFile() {
      if(this.fileList.length == 0) {
        this.$message({
          type:'error',
          message:'请选择要上传的文件'
        })
        return
      }
      this.shows = true //点击开始识别后进行loading等待
       this.$message({
            type:'warning',
            message:'正在上传中，请稍后...'
          })
      let formData = new FormData()
      for (var i = 0; i <this.fileList.length; i++) {
        formData.append("fileList", this.fileList[i]);
      }

      this.axios({
        url: "/upload",
        method: "post",
        data: formData
      })
      .then((res) => {
        console.log(123)
        console.log(res)
        this.shows = false //识别有结果后结束loading等待
        let isShow = res.data.data
        if(isShow){//如果成功则跳转 

          this.$router.push('/index')
          
          this.axios({
            url: "/view",
            method: "get",
          })
          .then (res => {
            console.log(res)
          })
        } else {
          this.$message({
            type:'warning',
            message:'上传失败，请重新尝试...'
          })
        }
      })
      .catch(e=>{
        console.log(e)
      })
    },
    gotoBack() {
      this.$router.push('/')
      
    }
  }
}
</script>
<style lang="scss" scoped>

.exit {
  text-align: center;
    margin-top: 20px;
    margin-left: 30px;
    font-size:16px;
}
.choose_wrap {
  color: #fff;
  background: url("../assets/bg.png") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: -8px;
  margin-left: -8px;
}
.title_wrap {
    color: white;
    font-size: 60px;
    font-weight: 600;
    margin-top: 100px;
    // margin-left: 220px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
.box {
  position: absolute;
  margin-top: 300px;
  left: 50%;
    transform: translateX(-50%);
}

// .ocr_wrap { 
//     padding-top: 100px; 
//     margin-left: 100px;
//   }
  .title {
    font-size: 32px;
    color: white;
    top: 250px;
    right: 150px;
    
  } 
  .inputFile {
    padding: 8px 20px;
    text-align: center;
    cursor: pointer;
    color: #333;
    background: #d8d8d8;
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    font-size: 20px;
    margin-top: 30px;
  }
  .inputFile  input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
  }
  .inputFile:hover {
      color: #fff;
      background: #00a9ff;
      text-decoration: none
  }
  .fileName {
    color: white;
    margin-top: 30px;
    border: 1px solid #666;
    width: 400px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 15px;
    background: #666;
  }
  .btn {
    color: #333;
    background: #d8d8d8;
    padding: 8px 20px;
    text-align: center;
    display: inline-block;
    border-radius: 2px;
    margin-top: 30px;
    cursor: pointer;
    font-size: 20px;
  }
  .btn:hover {
    color: #fff;
    background: #00a9ff;
    text-decoration: none
  }
</style>
